<template>
  <div>
    <div class="topSteps">
      <el-steps v-if="userType !== 'ENGINEER'" :active="active" finish-status="success" simple>
        <el-step title="待处理" ></el-step>
        <el-step title="待确认" ></el-step>
        <el-step title="处理中" ></el-step>
        <el-step title="已完成" ></el-step>
      </el-steps>
      <el-steps v-else :active="active2" finish-status="success" simple>
        <el-step title="待处理" ></el-step>
        <el-step title="处理中" ></el-step>
        <el-step title="已完成" ></el-step>
      </el-steps>
    </div>
    <el-row :gutter="0">
      <el-form ref="elForm" :model="formData" :rules="rules" size="small" label-width="150px">
        <el-col :span="24">
          <div class="labelTitle">报修信息</div>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报修内容" prop="description">
            <el-input readonly v-model="formData.description" type="textarea" placeholder="报修内容"
                      :autosize="{minRows: 3, maxRows: 3}" :style="{width: '50'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报修照片" prop="image">
            <el-image class="pic" :src="formData.image" alt="" :preview-src-list="[formData.image]"></el-image>
            <!--<img class="pic" :src="formData.image" alt=""  @click="previewImg(formData.image)">-->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="要求上门维修时间" prop="handleTime">
            <el-input readonly v-model="formData.handleTime" placeholder="要求上门维修时间" clearable :style="{width: '50'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备故障信息" prop="address">
            <!--<el-input v-model="formData.address" placeholder="维修地址" clearable :style="{width: '50'}">-->
            <!--</el-input>-->
            <el-input readonly v-model="formData.address" type="textarea" placeholder="设备故障信息"
                      :autosize="{minRows: 3, maxRows: 3}" :style="{width: '50'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修编号" prop="number">
            <el-input readonly v-model="formData.number" placeholder="维修编号" clearable :style="{width: '50'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="上报日期" prop="createTime">
            <el-input readonly v-model="formData.createTime" placeholder="上报日期" clearable :style="{width: '50'}">
            </el-input>
          </el-form-item>
        </el-col>
        <template v-if="userType === 'ENGINEER'">
          <el-col :span="12">
            <el-form-item label="客户名称" prop="userCompany">
              <el-input readonly v-model="formData.userCompany" placeholder="客户名称" clearable :style="{width: '50'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人" prop="userName">
              <el-input readonly v-model="formData.userName" placeholder="联系人" clearable :style="{width: '50'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式" prop="usrePhone">
              <el-input readonly v-model="formData.usrePhone" placeholder="联系方式" clearable :style="{width: '50'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
          </el-col>
        </template>
        <template v-if="userType === 'ASSIGNOR'">
          <el-col :span="12">
            <el-form-item label="客户名称" prop="userCompany">
              <el-input readonly v-model="formData.declarantCompany" placeholder="客户名称" clearable :style="{width: '50'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人" prop="userName">
              <el-input readonly v-model="formData.declarantName" placeholder="联系人" clearable :style="{width: '50'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式" prop="usrePhone">
              <el-input readonly v-model="formData.declarantPhone" placeholder="联系方式" clearable :style="{width: '50'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
          </el-col>
        </template>

        <el-col :span="24">
          <div class="labelTitle">维修信息</div>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修工程师" prop="engineer">
            <el-input readonly v-model="formData.engineer" placeholder="维修工程师" clearable :style="{width: '50'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修反馈" prop="repairDesc">
            <el-input readonly v-model="formData.repairDesc" type="textarea" placeholder="维修反馈"
                      :autosize="{minRows: 3, maxRows: 3}" :style="{width: '50'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修图片" prop="completeImg">
            <!--<img class="pic" :src="formData.completeImg" alt="" @click="previewImg(formData.completeImg)">-->
            <el-image class="pic" :src="formData.completeImg" alt="" :preview-src-list="[formData.completeImg]"></el-image>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div class="labelTitle">客户评价</div>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户评分" prop="star">
            <el-rate disabled v-model="formData.star" :max='5'></el-rate>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="评价内容" prop="comment">
            <el-input readonly v-model="formData.comment" type="textarea" placeholder="评价内容" :autosize="{minRows: 3, maxRows: 3}" :style="{width: '50'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div class="labelTitle">客户回访</div>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否回访" prop="returnVisitRemark">
            <el-switch
              :disabled="userType === 'ENGINEER'"
              v-model="formData.isCallback"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="是"
              inactive-text="否">
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="回访备注" prop="returnVisitRemark">
            <el-input :readOnly="readOnly" v-model="formData.returnVisitRemark" type="textarea" placeholder="回访备注"
                      :autosize="{minRows: 3, maxRows: 3}" :style="{width: '50'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="type !== 'A' &&formData.state === 2 && userType === 'ASSIGNOR'">
          <el-form-item size="large">
            <div style="width: 100%; text-align: center;">
              <el-button type="primary" @click="submitForm">提交</el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import * as OrderAction from '@/api/order';
import { mapGetters } from 'vuex'
export default {
  name: "orderDetail",
  components: {},
  props: [],
  data() {
    return {
      type: null,
      readOnly: false,
      active: 0,
      active2: 1,
      userType: null, // 用户类型
      // isCallback: 1, // 是否回访, 0是已回访，1是未回访
      formData: {
        description: undefined,
        image: null,
        field103: null,
        handleTime: undefined,
        address: undefined,
        number: undefined,
        createTime: undefined,
        userCompany: undefined,
        userName: undefined,
        usrePhone: undefined,
        engineer: undefined,
        field111: undefined,
        repairDesc: undefined,
        completeImg: null,
        star: 5,
        comment: undefined,
        returnVisitRemark: undefined,
      },
      rules: {
        description: [],
        field103: [],
        handleTime: [],
        number: [],
        createTime: [],
        userCompany: [],
        userName: [],
        usrePhone: [],
        engineer: [],
        field111: [],
        repairDesc: [],
        star: [],
        comment: [],
        returnVisitRemark: [],
      },
      field102Action: 'https://jsonplaceholder.typicode.com/posts/',
      field102fileList: [],
      field113Action: 'https://jsonplaceholder.typicode.com/posts/',
      field113fileList: [],
    }
  },
  computed: {
    ...mapGetters(['userInfoObj']),
  },
  watch: {},
  created() {
    console.log('userINfo', this.userInfoObj)
    this.type = this.$route.query.type;
    // console.log('类型的', this.$route.query.type);
    this.userType = this.userInfoObj.ruleType;
    this.getDetail(); // 获取订单详情
  },
  mounted() {},
  methods: {
    // 查看大图
    previewImg(img){
      if (img) {
        window.open(img)
      }
    },
    // 获取订单详情
    async getDetail(){
      const id = this.$route.query.id;
      const res = await OrderAction.getOrderDetail(id);
      if (res) {
        this.formData = res;
        if (this.userType === 'ASSIGNOR' && !this.formData.declarantCompany) {
          this.formData.declarantName = res.userName;
          this.formData.declarantPhone = res.usrePhone;
          this.formData.declarantCompany = res.userCompany;
        };
        console.log('订单的详情', this.formData);
        this.active = this.getActive(res.state);
        this.active2 = this.getActive2(res.state);
        if (res.isCallback === 1) {
          this.readOnly = true;
          this.formData.isCallback = true;
        } else {
          this.formData.isCallback = false;
        }
      }
    },

    getActive(state){
      switch (state) {
      case 0: {
        return 1;
      }
        break;
      case 3: {
        return 2;
      }
        break;
      case 1: {
        return 3;
      }
        break;
      case 2: {
        return 4;
      }
        break;
      }
    },
    getActive2(state){
      if (state === 3) {
        return 1;
      }
      if (state === 1) {
        return 2
      } else {
        return 3
      }
    },
    // 提交回访信息
    async submitForm() {
      let callBack = this.formData.isCallback ? 1 : 0;
      let params = {
        id: this.formData.id, // 当前列表ID
        number: this.formData.number, // 报修单号
        userId: this.formData.userId, // 用户Id
        ordEngId: this.formData.ordEngId, // 订单ID
        isCallback: callBack, // 是否回访
        returnVisitRemark: this.formData.returnVisitRemark // 回访备注
      }
      let res = await OrderAction.assignVisit(params);
      if (res) {
        this.$message.success(res.message);
        this.getDetail();
      }
      // this.$refs['elForm'].validate(valid => {
      //   if (!valid) return
      //   // TODO 提交表单
      // })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    field102BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      return isRightSize
    },
    submitUpload() {
      this.$refs['image'].submit()
    },
    field113BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      return isRightSize
    },
  }
}
</script>

<style lang="scss" scoped>
  .topSteps {
    margin-bottom: 40px;
  }

  .labelTitle {
    margin-bottom: 20px;
    margin-left: 80px;
    font-size: 18px;
    font-weight: bold;
  }

  .pic {
    width: 100px;
    height: 100px;
  }

  .el-rate {
    display: inline-block;
    font-size: 24px !important;
    vertical-align: text-top;
  }
</style>
